<template>
  <a-modal :maskClosable="false"
    title="详情"
    :width="1248"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">

      <a-row style="margin-bottom: 50px">
        <a-steps :current="model.orderStatus*1">
          <a-step title="待支付"/>
          <a-step title="待接单" />
          <a-step title="已接单" />
          <a-step title="进行中" />
          <a-step title="已完成" />
        </a-steps>
      </a-row>
      <a-descriptions title="基本信息" bordered>
        <a-descriptions-item label="订单来源">
          {{model.orderSource==30?"收银台":"用户下单"}}
        </a-descriptions-item>
        <a-descriptions-item label="订单号">
          {{model.orderNo}}
        </a-descriptions-item>
        <a-descriptions-item label="买家">
          {{model.memberName}}
        </a-descriptions-item>
        <a-descriptions-item label="订单金额 (元)">
          {{model.originalPrice}}
        </a-descriptions-item>
        <a-descriptions-item label="包装费 (元)" >
          {{model.bagPrice}}
        </a-descriptions-item>
        <a-descriptions-item label="实付款金额 (元)" >
          {{model.consumeAmount}}
        </a-descriptions-item>

        <a-descriptions-item label="交易状态">
          {{model.orderStatus=='0'?'待支付':model.orderType=='1'?'进行中':model.orderType=='2'?'已完成':'已退单'}}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="付款信息" bordered style="margin-top: 50px"></a-descriptions>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading">
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt=""
                 style="max-width:80px;font-size: 12px;font-style: italic;" />
          </template>
        </a-table>

      <a-descriptions title="付款信息" bordered style="margin-top: 50px">
        <a-descriptions-item label="应付款金额">
          {{model.consumeAmount}}
        </a-descriptions-item>
        <a-descriptions-item label="支付方式">
          {{model.payType=='1'?'现金':'微信'}}
        </a-descriptions-item>
        <a-descriptions-item label="支付流水号">
          {{model.payTrxNo}}
        </a-descriptions-item>
        <a-descriptions-item label="付款状态">
          {{model.payStatus=='1'?'等待支付':model.payStatus=='2'?'支付中':model.payStatus=='3'?'支付成功':model.payStatus=='4'?'支付失败':model.payStatus=='5'?'等待退款':model.payStatus=='6'?'退款中':model.payStatus=='7'?'退款成功':'退款失败 '}}
        </a-descriptions-item>
        <a-descriptions-item label="付款完成时间">
          {{model.payFinishTime}}
        </a-descriptions-item>
      </a-descriptions>

      <a-descriptions title="发货信息" bordered style="margin-top: 50px">
        <a-descriptions-item label="发货状态">
          {{model.deliveryStatus==1?'未发货':'已发货'}}
        </a-descriptions-item>
        <a-descriptions-item label="配送时间">
          {{model.deliveryTime}}
        </a-descriptions-item>
        <a-descriptions-item label="发货地址">
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction, putAction, getAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'ordStoreTableAreaModal',
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      disableMixinCreated:true,
      confirmLoading: false,
      loading:false,
      dataSource:[],
      // 表头
      columns: [
        {
          title: '商品类型',
          align: 'center',
          dataIndex: 'goodsType',
          width: 150,
          customRender: function(t, r, index) {
            //1一体机食谱 2一体机运动方案 3一体机整套方案
            if (t == '1') {
              return '食谱方案'
            } else if (t == '2') {
              return '运动方案'
            } else if (t == '3') {
              return '整套方案'
            }
            return ''
          }
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goodsName',
          width: 200
        },
        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'goodsImg',
          width: 180,
          scopedSlots: { customRender: 'imgSlot' }
        },
        {
          title: '商品单价',
          align: 'center',
          dataIndex: 'goodsPrice',
          width: 100
        },
        {
          title: '购买数量',
          align: 'center',
          dataIndex: 'totalNum',
          width: 100
        },
        {
          title: '商品总价(元)',
          align: 'center',
          dataIndex: 'totalPrice',
          width: 110
        },
        {
          title: '商品实付总价(元)',
          align: 'center',
          dataIndex: 'totalPayPrice',
          width: 110
        }
      ],
      url: {
        add: '/store/info',
        get: '/store/order',
        listGoods:'/store/order/goods',
      }
    }
  },
  created() {
    this.modelDefault = JSON.parse(JSON.stringify(this.model))

  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      const that = this
      that.model.id = record.id
      getAction(this.url.get + '/' + record.id).then((res) => {
        if (res.success) {
          that.model = res.result
        }
      })
      getAction(this.url.listGoods + '/' + record.orderNo).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        }
      })
      that.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    }

  }
}
</script>

<style scoped>

</style>
